<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfonter demo</title>
	<style>
        @font-face {
            --font-family;
            --font-url;
            font-weight: 300;
            font-style: normal;
        }

		/*
		http://meyerweb.com/eric/tools/css/reset/
		v2.0 | 20110126
		License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
        body {
            line-height: 1;
            height: 100vh;
        }
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */
		body {
			background: #f1f1f1;
			color: #000;
		}
        .page {
            background: #fff;
            width: 100%;
			height: 100%;
            margin: 0 auto;
            overflow: auto;
        }
        .font-container {
            line-height: 1.3;
            white-space: nowrap;
            margin: 0 0 0 10px;
        }
        h1 {
            position: relative;
            background: #444;
            font-size: 32px;
            color: #fff;
            padding: 10px 20px;
            margin: 0 0 10px 0;
        }
		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}
		.s10:before {
			content: '10px';
		}
		.s11:before {
			content: '11px';
		}
		.s12:before {
			content: '12px';
		}
		.s14:before {
			content: '14px';
		}
		.s18:before {
			content: '18px';
		}
		.s24:before {
			content: '24px';
		}
		.s30:before {
			content: '30px';
		}
		.s36:before {
			content: '36px';
		}
		.s48:before {
			content: '48px';
		}
		.s60:before {
			content: '60px';
		}
		.s72:before {
			content: '72px';
		}
		.s10:before, .s11:before, .s12:before, .s14:before,
		.s18:before, .s24:before, .s30:before, .s36:before,
		.s48:before, .s60:before, .s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}
		/* fonts demo styles */
        .demo-0 {
            --font-family;
            font-weight: 300;
            font-style: normal;
        }
	</style>
</head>
<body>
<div class="page">
	<div class="demo-0">
		<h1>{{h1}}</h1>
		<div class="font-container">
			<p class="letters">
				abcdefghijklmnopqrstuvwxyz <br />
				ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />				0123456789.:,;()*!?'@#<>$%&^+-=~
			</p>
			<p class="s10" style="font-size: 10px;">{{pangram}}</p>
			<p class="s11" style="font-size: 11px;">{{pangram}}</p>
			<p class="s12" style="font-size: 12px;">{{pangram}}</p>
			<p class="s14" style="font-size: 14px;">{{pangram}}</p>
			<p class="s18" style="font-size: 18px;">{{pangram}}</p>
			<p class="s24" style="font-size: 24px;">{{pangram}}</p>
			<p class="s30" style="font-size: 30px;">{{pangram}}</p>
			<p class="s36" style="font-size: 36px;">{{pangram}}</p>
			<p class="s48" style="font-size: 48px;">{{pangram}}</p>
			<p class="s60" style="font-size: 60px;">{{pangram}}</p>
			<p class="s72" style="font-size: 72px;">{{pangram}}</p>
		</div>
	</div>
</div>
</body>
</html>